<template>
	<div class="all">
		<div class="container">
			<vue-scroll :ops="scollOptions">
				<div
					class="user-form"
					v-if="dialogVisible"
				>
					<el-descriptions title="用户信息">
						<el-descriptions-item
							span="3"
							label="头像"
							labelStyle="justify-content: flex-end;width: 50%"
							contentStyle="width: 50%"
							><el-image
								style="width: 100px; height: 100px"
								:src="form.student_img"
								:fit="fit"
							></el-image
						></el-descriptions-item>
						<el-descriptions-item label="用户编号">{{
							form.id
						}}</el-descriptions-item>

						<el-descriptions-item label="用户名">{{
							form.name
						}}</el-descriptions-item>
						<el-descriptions-item label="用户密码">{{
							form.password
						}}</el-descriptions-item>
						<el-descriptions-item label="学号">{{
							form.student_id
						}}</el-descriptions-item>
						<el-descriptions-item label="年龄">{{
							form.age
						}}</el-descriptions-item>
						<el-descriptions-item label="手机号">{{
							form.phone
						}}</el-descriptions-item>
						<el-descriptions-item label="班级">{{
							form.class_name
						}}</el-descriptions-item>
						<el-descriptions-item label="创建时间">{{
							form.create_time
						}}</el-descriptions-item>
						<el-descriptions-item label="上次修改信息时间">{{
							form.update_time
						}}</el-descriptions-item>
					</el-descriptions>

					<el-button
						type="primary"
						@click="edit"
						size="mini"
						>修改</el-button
					>
				</div>
				<div
					class="user-form"
					v-else
				>
					<el-descriptions title="用户信息"> </el-descriptions>
					<el-form
						ref="form"
						:model="form"
						label-width="80px"
						inline
					>
						<el-form-item label="用户编号">
							<el-input
								size="mini"
								disabled
								v-model="form.id"
							></el-input>
						</el-form-item>
						<el-form-item label="用户名">
							<el-input
								size="mini"
								v-model="form.name"
							></el-input>
						</el-form-item>
						<el-form-item label="用户密码">
							<el-input
								size="mini"
								v-model="form.password"
							></el-input> </el-form-item
						><el-form-item label="学号">
							<el-input
								size="mini"
								v-model="form.student_id"
							></el-input> </el-form-item
						><el-form-item label="年龄">
							<el-input
								size="mini"
								v-model="form.age"
							></el-input> </el-form-item
						><el-form-item label="手机号">
							<el-input
								size="mini"
								v-model="form.phone"
							></el-input> </el-form-item
						><el-form-item label="班级">
							<el-input
								size="mini"
								v-model="form.class_name"
							></el-input> </el-form-item
						><el-form-item label="头像">
							<el-upload
								action="/python/upload"
								:show-file-list="false"
								class="avatar-uploader"
								:on-success="handleAvatarSuccess"
							>
								<img
									v-if="imageUrl"
									:src="imageUrl"
									class="avatar"
								/>
								<i
									v-else
									class="el-icon-plus avatar-uploader-icon"
								></i>
							</el-upload>
						</el-form-item>
						<div class="btn">
							<el-button
								type="primary"
								@click="onSubmit"
								size="mini"
								>保存</el-button
							>
							<el-button
								@click="edit"
								size="mini"
								>取消</el-button
							>
						</div>
					</el-form>
				</div>
			</vue-scroll>
		</div>
	</div>
</template>
<script>
	import { getUserList } from "@/api/developerServe/index";
	import { forget } from "@/api/user";

	import { formatDateTime } from "@/utils/tools";
	export default {
		data() {
			return {
				imageUrl: "",
				scollOptions: {
					scrollPanel: {
						scrollingX: false,
						scrollingY: true,
					},
					vuescroll: {
						mode: "native",
						sizeStrategy: "percent",
						detectResize: true,
						zooming: false,
					},
					bar: {
						onlyShowBarOnScroll: false,
						background: "#dedede",
						opacity: 1,
					},
				},
				form: {
					id: null,
					name: "",
					password: "",
					student_img: "",
					student_id: null,
					password: "",
					age: null,
					student_img: "",
					phone: "",
					class_name: "",
					create_time: "",
					update_time: "",
				},
				dialogVisible: true,
			};
		},
		created() {},
		mounted() {
			this.userData = localStorage.getItem("userData");
			this.userData = JSON.parse(this.userData);
			this.getData();
		},
		methods: {
			handleAvatarSuccess(res, file) {
				this.form.student_img = "/python" + res.data;
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			edit() {
				this.dialogVisible = !this.dialogVisible;
				if (this.dialogVisible) {
					this.getData();
				}
			},
			async onSubmit() {
				await forget({
					...this.form,
				});
				this.$message.success("操作成功！");
				this.userData = localStorage.setItem(
					"userData",
					JSON.stringify({ ...this.form })
				);

				this.edit();
			},
			getData() {
				return getUserList({
					id: this.userData.id,
				})
					.then((res) => {
						res.data.map((item) => {
							this.form = {
								...item,
								create_time: formatDateTime(item.create_time),
								update_time: formatDateTime(item.update_time),
							};
						});
					})
					.catch(() => {});
			},
		},
	};
</script>
<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
<style lang="scss" scoped>
	.all {
		width: 100%;
		height: 100%;

		.container {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			.user-form {
				background-color: #ffffff;
				padding: 0.78125vw;
				display: flex;
				flex-direction: column;
				align-items: center;
				/deep/ .el-form {
					width: 100%;
				}
				.btn {
					text-align: center;
				}
			}
		}
	}
</style>
